<form [formGroup]="form" class="form">
  <label for="anime-name" class="control-label">
    <div class="label">
      <span class="label-text">你最近看的一部番</span>
    </div>
    <input
      id="anime-name"
      formControlName="animeName"
      type="text"
      placeholder="番名"
      class="text-input"
    />
  </label>
  <label for="anime-rating" class="control-label">
    <div class="label">
      <span class="label-text">你会给它打几分？</span>
    </div>
    <app-star-rating
      id="anime-rating"
      formControlName="rating"
    />
  </label>
</form>

<label
  class="label cursor-pointer w-96 mt-4 self-center justify-end space-x-4"
>
  <span class="label-text">Disabled</span>
  <input
    (change)="updateFormDisabledState($event.target)"
    type="checkbox"
    class="checkbox checkbox-primary"
  />
</label>

<div class="divider">FORM VALUE</div>

<div class="result">
  <pre><code><code class="font-bold">Value:</code>
{{ form.value | json }}

<code class="font-bold">Touched:</code> {{ form.touched }}

<code class="font-bold">Status:</code> {{ form.status }}
</code></pre>
</div>
